<!-- 首页论坛发布展示组件 -->
<template>
	<view class="index-forum">
		<view class="index-forum__user-info flex">
			<image src="/static/images/avatar/userAvatar04.jpg" mode="aspectFill" class="index-forum__user-avatar"></image>
			<view class="flex-column">
				<view>
					<text class="index-forum__user-name">飞飞飞行小兔102</text>
					<image src="/static/images/female.png" mode="aspectFill" class="index-forum__user-gender"></image>
				</view>
				<text class="index-forum__user-post-time">30分钟前</text>
			</view>
		</view>
		
		<!-- 内容展示部分 -->
		<view class="index-forum__content" @click="onClickToDetail">
			<view class="index-forum__content-text">
				求问，我想知道徐霞老师的课程怎么样呀，给的分高不高，本人想找一个事情少但是给分高的老师，希望大家推荐推荐。
			</view>
			
			<view class="index-forum__content-imgs flex">
				<image src="http://localhost:3000/images/items/上课.jpg" mode="aspectFill" class="index-forum__content-img"
				></image>
			</view>
			
		</view>
		
		<slot></slot>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';



	function onClickToDetail(){
		let id = 12;
		// 获取当前页面路径
		const currentPage = getCurrentPages();  // 获取当前所有页面栈
		const currentPath = currentPage[currentPage.length - 1].route;  // 获取当前页面的路径
		// console.log(currentPath);
		if(currentPath!=='pages/index/forumDetails/forumDetails'){
			uni.navigateTo({
				url:`/pages/index/forumDetails/forumDetails?id=${id}`,
				// url:'index'
				success: () => {
					console.log('跳转到论坛详情页成功！');
				},
				fail: () => {
					console.log('跳转到论坛详情页失败！');
				}
			})
		}

	}
</script>

<style lang="scss" scoped>
.index-forum{
	width: 702rpx;
	background-color: #fff;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 24rpx;
	padding-bottom: 25rpx;
	margin-bottom: 25rpx;
	border-radius: 20rpx;
	&__user{
		&-info{
			margin-top: 20rpx;
			margin-bottom: 18rpx;
		}
		
		&-avatar{
			width: 50rpx;
			height: 50rpx;
			margin-right: 18rpx;
			border-radius: 50%;
		}
		
		&-name{
			font-size: 24rpx;
		}
		
		&-gender{
			width: 25rpx;
			height: 25rpx;
			margin-left: 3rpx;
		}
		
		&-post-time{
			font-size: 18rpx;
			color: #333333;
		}
	}
	
	&__content{
		margin-bottom: 18rpx;
		&-text{
			font-size: 24rpx;
			margin-bottom: 18rpx;
		}
		
		&-imgs{
			// justify-content: space-between;
		}
		
		&-img{
			width: 206rpx;
			height: 206rpx;
			margin-right: 18rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	
}
</style>